<template>
  <div class="menu-preview">
    <div class="preview-header">
      <h4>菜单预览</h4>
      <div class="preview-modes">
        <el-button-group>
          <el-button 
            :type="viewMode === 'sidebar' ? 'primary' : ''" 
            size="small"
            @click="viewMode = 'sidebar'"
          >
            侧边栏
          </el-button>
          <el-button 
            :type="viewMode === 'tree' ? 'primary' : ''" 
            size="small"
            @click="viewMode = 'tree'"
          >
            树形结构
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 侧边栏预览模式 -->
    <div v-if="viewMode === 'sidebar'" class="sidebar-preview">
      <div class="mock-sidebar">
        <div class="sidebar-header">
          <div class="logo">
            <i class="fa fa-rocket"></i>
            <span>DevOps平台</span>
          </div>
        </div>
        <div class="sidebar-menu">
          <MenuItemPreview
            v-for="menu in menus"
            :key="menu.id"
            :menu="menu"
            :level="0"
            mode="sidebar"
          />
        </div>
      </div>
    </div>

    <!-- 树形结构预览模式 -->
    <div v-else class="tree-preview">
      <div class="tree-container">
        <MenuItemPreview
          v-for="menu in menus"
          :key="menu.id"
          :menu="menu"
          :level="0"
          mode="tree"
        />
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="preview-stats">
      <div class="stat-item">
        <span class="stat-label">总菜单数：</span>
        <span class="stat-value">{{ totalMenuCount }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">顶级菜单：</span>
        <span class="stat-value">{{ topLevelCount }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">自动生成：</span>
        <span class="stat-value">{{ generatedCount }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import MenuItemPreview from './MenuItemPreview.vue'

// Props
interface Props {
  menus: any[]
}

const props = defineProps<Props>()

// 响应式数据
const viewMode = ref<'sidebar' | 'tree'>('sidebar')

// 计算属性
const totalMenuCount = computed(() => {
  const countMenus = (menus: any[]): number => {
    let count = menus.length
    menus.forEach(menu => {
      if (menu.children && menu.children.length > 0) {
        count += countMenus(menu.children)
      }
    })
    return count
  }
  return countMenus(props.menus)
})

const topLevelCount = computed(() => {
  return props.menus.length
})

const generatedCount = computed(() => {
  const countGenerated = (menus: any[]): number => {
    let count = 0
    menus.forEach(menu => {
      if (menu.is_generated) count++
      if (menu.children && menu.children.length > 0) {
        count += countGenerated(menu.children)
      }
    })
    return count
  }
  return countGenerated(props.menus)
})
</script>

<style lang="scss" scoped>
.menu-preview {
  .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    h4 {
      color: #00eaff;
      margin: 0;
      font-size: 16px;
    }
  }
  
  .sidebar-preview {
    .mock-sidebar {
      width: 100%;
      max-width: 280px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      overflow: hidden;
      
      .sidebar-header {
        padding: 16px;
        background: rgba(0, 234, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        
        .logo {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #00eaff;
          font-weight: bold;
          
          i {
            font-size: 18px;
          }
        }
      }
      
      .sidebar-menu {
        padding: 8px 0;
        max-height: 300px;
        overflow-y: auto;
      }
    }
  }
  
  .tree-preview {
    .tree-container {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 16px;
      max-height: 300px;
      overflow-y: auto;
    }
  }
  
  .preview-stats {
    margin-top: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    justify-content: space-around;
    
    .stat-item {
      text-align: center;
      
      .stat-label {
        display: block;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 4px;
      }
      
      .stat-value {
        display: block;
        font-size: 18px;
        font-weight: bold;
        color: #00eaff;
      }
    }
  }
}

// 滚动条样式
.sidebar-menu::-webkit-scrollbar,
.tree-container::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu::-webkit-scrollbar-track,
.tree-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.sidebar-menu::-webkit-scrollbar-thumb,
.tree-container::-webkit-scrollbar-thumb {
  background: rgba(0, 234, 255, 0.5);
  border-radius: 2px;
  
  &:hover {
    background: rgba(0, 234, 255, 0.7);
  }
}

// Element Plus 样式覆盖
:deep(.el-button-group .el-button) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  
  &.el-button--primary {
    background: linear-gradient(135deg, #00eaff, #0099cc);
    border-color: #00eaff;
    color: #fff;
  }
  
  &:hover:not(.el-button--primary) {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }
}
</style>
